<template>
  <div class="my-vip-open">
    <div class="content">
      <div class="price">
        <div class="main">
          <div class="money">
            <span>￥</span>10
          </div>
          <div class="title">一个月VIP</div>
          <el-button type="danger" size="small" @click="toPay(0.01)">开通</el-button>
        </div>
      </div>
      <div class="price">
        <div class="main">
          <div class="money">
            <span>￥</span>30
          </div>
          <div class="title">三个月VIP</div>
          <el-button type="danger" size="small"  @click="toPay('0.10')">开通</el-button>
        </div>
      </div>
      <div class="price">
        <div class="main">
          <div class="money">
            <span>￥</span>50
          </div>
          <div class="title">一年VIP</div>
          <el-button type="danger" size="small"  @click="toPay('0.20')">开通</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-vip-open",
  data: function() {
    return {};
  },
  methods: {
    toPay(money){
      this.axios.post('pay/payParam',{
        money:money,
        userId:this.$store.state.user.id,

      }).then(res=>{
        window.open("https://api.6688pay.com:8080?"+res.data.param, "_blank"); 
      })
       /* let routeData = this.$router.resolve({
        name: "play",
        query: { id: this.id }
      });*/
      
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  width: 500px;
  margin: 50px auto;
  justify-content: space-between;
 
  .price {
    border: 2px solid #dcdfe6;
    height: 180px;
    width: 150px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    &:hover {
      border: 2px solid #f1bd41;
      cursor: pointer;
     /*  background-color: rgba($color: #f5cc6c, $alpha: 0.2); */
      
    }

    .title {
      color: #606266;
      text-align: center;
      font-size: 30px;
      margin: 10px 0;
    }
    .money {
      text-align: center;
      color: #f1bd41;
      margin: auto 0;
      height: 50px;
      line-height: 50px;
      font-size: 50px;
      span {
        font-size: 14px;
      }
    }
  }
}
</style>